<script setup lang="ts">
import { computed } from 'vue'
import { useCountStore } from '@/store'
import { storeToRefs } from 'pinia'

const countStore = useCountStore()
// 通过计算属性
const countComputed = computed(() => countStore.count)
// 通过 storeToRefs api 结构
const { doubleCount } = storeToRefs(countStore)

defineProps<{ msg: string }>()



</script>

<template>
  <h1 class="p-10 text-orange-400">{{ msg }}</h1>
  <div class="index">
    <span>当前数值{{ countComputed }}</span>
    <br />
    <span>双倍数值{{ doubleCount }}</span>
    <br />
    <el-button type="primary" size="default" @click="countStore.countAdd">+1</el-button>
    <el-button type="primary" size="default" @click="countStore.countReduce">-1</el-button>
  </div>
</template>

<style scoped>
</style>
